<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>预约配置管理</title>
  <th:block th:include="common/pub_head :: default"></th:block>
  <th:block th:include="common/pub_head :: layui"></th:block>

  <style>
    .active {
      color: blue;
      cursor: pointer;
    }
    .layui-table-cell {
      height:auto;
      overflow:visible;
      text-overflow:inherit;
      white-space:normal;
    }

  </style>
</head>
<body>
<form class="layui-form layui-form-pane" id="list_form">
  <fieldset class="layui-elem-field layui-field-title">
    <legend>预约配置管理</legend>
  </fieldset>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">地区名称</label>
      <div class="layui-input-inline">
        <input type="text" name="areaCodeName" id="areaCodeName" autocomplete="off"
               class="layui-input"
               placeholder="地区名称">
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">门店名称</label>
      <div class="layui-input-inline">
        <input type="text" name="storeName" id="storeName" autocomplete="off" class="layui-input"
               placeholder="请输入门店名称">
      </div>
    </div>
    <div class="layui-inline">
      <button type="button" class="layui-btn" onclick="listAppointmentConfByParams()">查询</button>
      <button type="button" class="layui-btn layui-btn-primary" onclick="resetForm()">重置</button>
    </div>
  </div>
</form>
<table class="layui-table" lay-filter="table" id='table'></table>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" type="button" onclick="addAppointmentConf()">新增</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel">批量删除</button>
  </div>
</script>
<!--表格操作-->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
  /*<![CDATA[*/
  function addAppointmentConf() {
    var URL = path + "/appointment/conf/addOrEditAppointmentConf";

    layer.open({
      title: "新增预约配置",
      type: 2,
      area: ['800px', '500px'],
      content: URL
    });
  }

  $(document).on("click", ".active", function () {
    var id = $(this).attr("data-id");
    var active = parseInt($(this).attr("data-active"));
    active = (active + 1) % 2;
    var URL = path + "/appointment/conf/active";
    var formData = {
      id: id,
      active: active
    };

    var that = this;
    var load = layer.load();
    $.post(URL, formData, function (jsonData) {
      if (jsonData.flag) {
        $(that).attr("data-active", active);
        var txt = "启用";
        if (active == 0) {
          txt = "禁用";
        }
        $(that).html(txt);
      } else {
        layer.msg("修改失败", {icon: 2});
      }
      layer.close(load);
    }, "json");
  });
  /*]]>*/
</script>
<script>
  /*<![CDATA[*/
  var table;
  var form;
  layui.use(['table', 'form'], function () {
    table = layui.table;
    form = layui.form;

    table.render({
      elem: '#table',
      id: 'table',
      toolbar: '#toolbarDemo',
      url: path + '/appointment/conf/listAppointmentConfByParams',
      cols: [
        [
          {type: 'checkbox', field: "id"},
          {field: 'address', title: '地址', width: 200},
          {field: 'storeName', title: '门店名称', width: 200},
          {field: 'orderNum', title: '排序', width: 60, align: 'center'},
          {
            field: '', title: '时间段', width: 300, templet: function (row) {
              var src = path + "/img/loading.gif"
              return "<span class='timeRange' data-id='" + row.id + "'><img src='" + src + "'></span>";
            }
          },
          {
            field: '', title: '共计', width: 80, templet: function (row) {
              var src = path + "/img/loading.gif"
              return "<span class='total' data-id='" + row.id + "'><img src='" + src + "'></span>";
            }
          },
          {
            field: 'active', title: '状态', width: 80,
            templet: function (row) {
              var txt = "<span class='active' data-active='1' data-id='" + row.id + "'>启用</span>";
              if (row.active == 0) {
                txt = "<span class='active' data-active='0' data-id='" + row.id + "'>禁用</span>";
              }
              return txt;
            }
          },
          {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 130}
        ]
      ],
      limit: 10,
      request: {
        pageName: 'pn',
        limitName: 'pageSize' //每页数据量的参数名，默认：limit
      },
      done: function (res, index, upload) {
        var URL = path + "/appointment/conf/getTimeRangeByIdList";
        var idList = $(".timeRange").map(function () {
          return $(this).attr('data-id');
        }).get().join(",");
        var formData = {
          idList: idList
        };

        $.post(URL, formData, function (jsonData) {
          if (jsonData.flag) {
            $(".timeRange").each(function (index, domEle) {
              var timeRangeList = jsonData.timeRangeList;
              var flag = false;
              if (timeRangeList) {
                for (var i = 0; i < timeRangeList.length; i++) {
                  if ($(this).attr("data-id") == timeRangeList[i].id) {
                    if (timeRangeList[i].timeRange) {
                      $(this).html(timeRangeList[i].timeRange.split(",").join("<br />"));
                      $(".total").eq(index).html(timeRangeList[i].total);
                    } else {
                      $(this).html("-");
                      $(".total").eq(index).html("-");
                    }

                    flag = true;
                  }
                }
              }
              console.log(flag);
              if (!flag) {
                $(this).html("-");
              }

            })
          }
        }, "json");
      },
      page: true
    });

    table.on('toolbar(table)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id);
      switch (obj.event) {
        case 'batchDel':
          var data = checkStatus.data;
          var selectId = [];
          $.each(data, function (index, domEle) {
            selectId.push(domEle.id);
          });
          if (selectId.length == 0) {
            layer.alert("请先选择数据");

            return;
          }
          batchDelAppointmentConf(selectId + "");
          break;
      }
    });

    function batchDelAppointmentConf(idList) {
      var URL = path + "/appointment/conf/batchDelAppointmentConf";
      var formData = {
        "idList": idList
      };

      layer.confirm("确定要删除数据吗?", function () {
        $.post(URL, formData, function (jsonData) {
          if (jsonData.flag) {
            layer.msg("删除成功", {icon: 1});
            listAppointmentConfByParams();
          } else {
            console.log(jsonData.errorMsg);
            layer.msg("删除失败", {icon: 2});
          }
        }, "json");
      });
    }

    table.on('tool(table)', function (obj) {
      var data = obj.data;
      var selectId = [data.id];
      if (obj.event === 'del') {
        batchDelAppointmentConf(selectId + "");
      } else if (obj.event === 'edit') {
        var URL = path + "/appointment/conf/addOrEditAppointmentConf?id=" + data.id;

        layer.open({
          title: "修改预约配置",
          type: 2,
          area: ['800px', '500px'],
          content: URL
        });
      }
    });
  });

  document.onkeydown = EnterLogin;

  function EnterLogin(event) {
    if (event.keyCode == 13) {
      listAppointmentConfByParams();
    }
  }

  function listAppointmentConfByParams() {
    layer.closeAll();
    table.reload('table', {
      page: {
        curr: 1 //重新从第 1 页开始
      }
      , where: {
        areaCodeName: $("#areaCodeName").val(),
        storeName: $("#storeName").val(),
        active: $("#active").val()
      }
    });
  }

  function resetForm() {
    $('#list_form')[0].reset();
  }

  /*]]>*/
</script>
</body>
</html>